<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
		<title>课程</title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/content.css" />
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		html,
		body {
			background-color: rgb(255, 250, 228);
			padding: 0;
			margin: 0;
		}
	</style>

	<body>
		<div id="main" v-cloak>
			<div class="banner">
				<div>
					<img :src="return_data.course_pic" class="introduce_pic" />
					<img :src="chapters[0].chapter_pic" class="chapter_pic" v-if="chapters[0]" />
				</div>
				<div class="v_show">
					<div class="z"></div>
					<div class="start">
						<span v-if="return_data.record_id === 0" @click="Jump(return_data.chapter[0].chapter_id)">开始学习</span>
						<span v-if="return_data.record_id != 0" @click="Jump(return_data.record_id)">继续学习</span>
					</div>
				</div>
			</div>
			<div class="menu">
				<div class="menu_act">介绍</div>
				<div>视频</div>
				<div>评价</div>
			</div>
			<div class="content">
				<div class="content_introduce">
					<div class="content_introduce_title">
						<span>{{return_data.course_name}}</span>
						<span>{{return_data.study_num}}学过</span>
					</div>
					<div class="bc"></div>
					<div class="content_introduce_content">
						<p>课程介绍</p>
						<div class="course_desc" v-html="return_data.course_desc"></div>
					</div>
					<div class="content_introduce_bottom" v-if="return_data.have_buy != true">
						<div>
							<span>￥{{return_data.course_price}}</span>
							<a :href="'order.html?course_type='+GetQueryString('course_type')+'&extend_type='+GetQueryString('extend_type')"><span>购买课程</span></a>
						</div>
					</div>
				</div>
				<div class="content_video">
					<div class="content_video_title">
						<span>{{return_data.course_name}}</span>
					</div>
					<div class="bc"></div>
					<div class="content_video_list">
						<div v-for="(chapter,index) in chapters" @click="Jump(chapter.chapter_id)">
							<span v-if="chapter.chapter_id !== return_data.record_id">{{chapter.chapter_no}}&nbsp;{{chapter.chapter_name}}</span>
							<span v-if="chapter.chapter_id !== return_data.record_id">时长：{{chapter.video_time}}</span>
							<span v-if="chapter.chapter_id === return_data.record_id" style="color: rgb(254, 200, 3);">{{chapter.chapter_no}}&nbsp;{{chapter.chapter_name}}</span>
							<span v-if="chapter.chapter_id === return_data.record_id" style="color: rgb(254, 200, 3);">时长：{{chapter.video_time}}</span>
						</div>
					</div>
				</div>

				<div class="content_evaluate">
					<div class="content_evaluate_title">
						<span>{{return_data.course_name}}</span>
						<span>({{comment_num}}人已评价)</span>
					</div>
					<div class="bc"></div>
					<div class="content_evaluate_list">
						<div class="evaluate" v-for="comment in comments" v-if="comment_num !==0">
							<div class="evaluate_portrait">
								<img :src="comment.head_img" />
							</div>
							<div class="evaluate_main">
								<div>
									<span>{{comment.nick_name}}</span>
									<span v-if="comment.comment_socre === '1'">
										<img src="img/40@2x.png" />
										<img src="img/41@2x.png" />
										<img src="img/41@2x.png" />
										<img src="img/41@2x.png" />
										<img src="img/41@2x.png" />
									</span>
									<span v-if="comment.comment_socre === '2'">
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
										<img src="img/41@2x.png" />
										<img src="img/41@2x.png" />
										<img src="img/41@2x.png" />
									</span>
									<span v-if="comment.comment_socre === '3'">
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
										<img src="img/41@2x.png" />
										<img src="img/41@2x.png" />
									</span>
									<span v-if="comment.comment_socre === '4'">
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
										<img src="img/41@2x.png" />
									</span>
									<span v-if="comment.comment_socre === '5'">
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
										<img src="img/40@2x.png" />
									</span>
								</div>
								<div>
									{{comment.comment_content}}
								</div>
								<div>
									{{comment.add_time}}
								</div>
							</div>
						</div>
						<div class="go" v-if="return_data.have_buy === true && comment_num !== '0'">
							<a :href="'comment.html?id='+return_data.course_id+'&url='+nowUrl"><img src="img/42@2x.png" /></a>
						</div>
						<!--未购买,无评价-->
						<div class="no_evaluate" v-if="comment_num === '0' && return_data.have_buy === false">
							<img src="img/43@2x.png" />
							<p>暂无评价！购买课程 即可发布评价</p>
						</div>
						<!--购买，无评价-->
						<div class="no_evaluate" v-if="comment_num === '0' && return_data.have_buy === true">
							<img src="img/43@2x.png" />
							<p>暂无评价！</p>
							<a :href="'comment.html?id='+return_data.course_id+'&url='+nowUrl"><span>去评价哦！</span></a>
						</div>
						<div class="load">
							<img src="img/shuaxin.png" />
						</div>
						<div class="no_data">
							我是有底线的哦&nbsp;>_
							< </div>
						</div>
					</div>
				</div>
			</div>
			<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				getOpenId();
				var data = {
					return_data: {},
					chapters: [],
					comment_num: "0",
					comments: [],
					limit: 15,
					height: 0,
					nowUrl: window.location.href
				}
				var app = new Vue({
					el: '#main',
					data: data,
					methods: {
						init: function() {
							var self = this;
							self.getInfo();
						},
						//获取课程
						getInfo: function() {
							var self = this;
							$.ajax({
								url: apiPath + 'course/get-info',
								type: 'post',
								dataType: 'json',
								data: {
									open_id: open_id,
									course_type: GetQueryString("course_type"),
									extend_type: GetQueryString("extend_type"),
									flagsign: 1
								},
								success: function(data) {
									self.return_data = data.returnData;
									self.chapters = data.returnData.chapter;
									self.getComment();
								}
							});
						},
						//获取课程评论
						getComment: function() {
							var self = this;
							$.ajax({
								url: apiPath + 'course/get-comment',
								type: 'post',
								dataType: 'json',
								data: {
									course_id: self.return_data.course_id,
									page: 1,
									limit: self.limit,
									flagsign: 1
								},
								success: function(data) {
									self.comment_num = data.returnData.comment_num;
									self.comments = data.returnData.comment;
									$(".load").hide();
								}
							});
						},
						Jump: function(id) {
							window.location.href = "curriculum_video.html?id=" + id + '&course_type=' + GetQueryString('course_type') + '&extend_type=' + GetQueryString('extend_type')
						}
					},
					mounted() {
						var self = this;
						$(".menu>div").bind("click", function() {
							var index = $(this).index();
							$(this).addClass("menu_act");
							$(this).siblings().removeClass("menu_act");
							$('.content').children('div').eq(index).show().siblings().hide();
							if(index == 1) {
								$(".v_show").show();
								$(".chapter_pic").show();
								$(".introduce_pic").hide();
							} else {
								$(".v_show").hide();
								$(".introduce_pic").show();
								$(".chapter_pic").hide()
							}
						});
						$(".menu div").eq(0).click();
						$(".course_desc").html(self.return_data.course_desc);
						$(window).scroll(function() {
							if($(window).scrollTop() >= $(".banner").height()) {
								$('.menu').css('position', 'fixed');
								$('.menu').css('top', "0");
							} else {
								$('.menu').css('position', '');
							};
							var scrollTop = $(this).scrollTop();
							var scrollHeight = $(document).height();
							var windowHeight = $(this).height();
							if(scrollTop + windowHeight + self.height == scrollHeight) {
								// 此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
								$(".load").show()
								self.height = 100;
								setTimeout(function() {
									if(self.comment_num > self.limit) {
										self.height = 0;
										self.limit = self.limit + 15;
										self.getComment();
									} else {
										$(".load").hide();
										$(".no_data").show()
									}
								}, 500);
							}
						});
					},
				});
				app.init();
			</script>
	</body>

</html>